<template>
    <div id="orderBox">
      <div id="title">
          <h3>订单管理</h3>
      </div>
      <div class="blackLine"></div>
      <div id="abilityBox">
            <div class="search1Box">
                <el-input
                    id="searchByName"
                    v-model="searchParam.openId"
                    size="mini"
                    placeholder="输入用户ID搜索">
                </el-input>
            </div>
            <div class="selectBox">
                <el-select v-model="searchParam.state" clearable placeholder="请选择订单状态">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </div>
      </div>
      <div id="orderTableBox">
          <el-table
              ref="filterTable"
              :highlight-current-row="true"
              :stripe="true"
              :border="true"
              :data="tableData"
              style="width: 100%">
              <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="订单详情：">
                            <div v-for="item in props.row.foodName">
                                <span>{{item}}</span>
                            </div>
                        </el-form-item>
                    </el-form>
                </template>
              </el-table-column>
              <el-table-column
                  width="140"
                  align="center"
                  label="订单ID"
                  prop="id">
              </el-table-column>
              <el-table-column
                  column-key="categoryName"
                  width="190"
                  align="center"
                  label="用户ID"
                  prop="openId">
              </el-table-column>
              <el-table-column
                  width="100"
                  align="center"
                  label="用户名称"
                  prop="wxUserName">
              </el-table-column>
              <el-table-column
                  width="70"
                  align="center"
                  label="订单价格"
                  prop="price">
              </el-table-column>
              <el-table-column
                  width="70"
                  align="center"
                  label="餐位号"
                  prop="room">
              </el-table-column>
              <el-table-column
                  width="80"
                  align="center"
                  label="订单状态"
                  prop="state">
                  <template slot-scope="scope">
                      <el-tag :type="scope.row.state === 0? 'danger':'success'">{{scope.row.state == 0? '处理中':'已完成'}}</el-tag>
                  </template>
              </el-table-column>
              <el-table-column
                  sortable
                  width="80"
                  align="center"
                  label="创建时间"
                  prop="createTime">
              </el-table-column>
              <el-table-column
                  align="center">
                  <template slot="header" slot-scope="scope">
                      <el-input
                          id="searchByName"
                          v-model="searchParam.id"
                          size="mini"
                          placeholder="输入订单号搜索">
                      </el-input>
                      <el-button @click="findOrder()" id="searchBtn" icon="el-icon-search" circle></el-button>
                  </template>
                  <template slot-scope="scope">
                    <el-button
                        :disabled="scope.row.state === 1? true:false"
                        size="mini"
                        @click="orderSuccess(scope.row.id)">完成订单</el-button>
                    </template>
              </el-table-column>
          </el-table>
          <div id="footBox">
              <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="this.pageParam.currentPage"
                  :page-sizes="[10, 20, 30, 40]"
                  :page-size="this.pageParam.pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="pageParam.tableDataTotal">
              </el-pagination>
          </div>
      </div>
    </div>
  </template>
  
  <script>
import Form from '../user/Form.vue'
  export default {
  components: { Form },
      data(){
          return{
              inputVisible: false,
              inputValue: '',
              //addform的菜品类别选择器
              options: [
                {
                    value: '0',
                    label: '处理中'
                }, {
                    value: '1',
                    label: '已完成'
                }],
              value: '',
              //表格数据
              tableData: [],
              //查询参数
              searchParam:{
                //微信用户openId
                openId:"",
                //订单Id
                id: "",
                //订单状态
                state: ""
              },
              //分页
              pageParam:{
                  //当前第几页
                  currentPage: 1,
                  //数据总条数
                  tableDataTotal: 0,
                  //每页条数
                  onePageSize: 10,
              },
          }
      },
      methods: {
        //完成订单
        orderSuccess(id){
            this.$confirm("确定完成该订单, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(()=>{
                this.$axios.post("http://localhost:8888/hwy/cater/order/orderSuccess/"+id)
                    .then((response) => {
                        this.findOrder();
                    })
            }).catch(()=>{
                this.$message({
                    type: "info",
                    message: "已取消",
                });
            })
        },
        //每页条数改变
        handleSizeChange(val) {
            this.pageParam.onePageSize = val;
            this.findOrder();
        },
        //改变页码
        handleCurrentChange(val) {
            this.pageParam.currentPage = val;
            this.findOrder();
        },
        //查询所有订单
        findOrder(){
            this.$axios.post("http://localhost:8888/hwy/cater/order/findOrder/"+this.pageParam.currentPage+"/"+this.pageParam.onePageSize,this.searchParam)
                .then((response) => {
                    console.log(response.data.data)
                    this.tableData = response.data.data.orderData;
                    this.pageParam.tableDataTotal = response.data.data.page.total;
                    this.pageParam.currentPage = response.data.data.page.current;
            })
        },
      },
      mounted(){
          this.findOrder();
      },
      computed: {
          headers() {
              return {
                  "Authorization": localStorage.getItem("token")
              }
          }
      },
      watch: {
          
    }
  
  }
</script>

<style scoped>
@import '../../assets/css/order/order.css'
</style>